<template>
  <div class="v-editor-model-tree-select g-jc-sb">
    <PropertyNodeLabel
      :row="row"
      :encrypted="encrypted"
    ></PropertyNodeLabel>
    <span class="g-pd-l-8 g-flex-1">
      {{ props.row.value && tableData.get(props.row.value as string)?.name }}
    </span>

    <div
      v-if="selected && !row.readonly && !isModelDisabled && !tableElementDisabled"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { actionManager } from "@/action/ActionManager";
import { GetPropertiesAction } from "@/modules/model/actions/project/GetPropertiesAction";
import { PropertyRow } from "../../types";
import { Ref, toRaw, inject, ref, onMounted } from "vue";
import PropertyNodeLabel from "../custom/PropertyNodeLabel.vue";
import { ActionKey } from "@/action/ActionKey";
import { TableALLProperty } from "@/modules/model/comps/station/sider/attribute/types";
import { modelService } from "@/modules/model/service";
import { TableResAllColumn } from "@/modules/model/modals/getProperties/GetProperties.vue";
import { locale } from "@/util/locale";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 模型单选-树选择弹窗
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  tableElementDisabled?: boolean;
  encrypted?: boolean;
}>();

const handleClick = () => {
  const action = actionManager.getAction(ActionKey.GetProperties) as GetPropertiesAction;
  action?.run(toRaw(props.row));
};
onMounted(async () => {
  const data = await modelService.getQueryAllProperty(app.activeProjectId);
  await initData(app.activeProjectId, data);
});
const tableData = ref<Map<string, TableResAllColumn>>(new Map());
async function initData(projectId: string, data: TableALLProperty) {
  const map = await modelService.getProjectModelNameByKeys(
    projectId,
    data.customizeProperties.map(item => item.key)
  );

  data.normalProperties.map(itemNormal => {
    tableData.value.set(itemNormal.key, {
      name: locale.getTByKey(`propertyConfig.${itemNormal.key}`, itemNormal.name),
      key: itemNormal.key,
      show: true,
      enName: itemNormal.enName
    });
  });
  data.customizeProperties.map(itemCustomize => {
    tableData.value.set(itemCustomize.key, {
      name: locale.getTByKey(`propertyConfig.${itemCustomize.key}`, map[itemCustomize.key]),
      key: itemCustomize.key,
      show: true,
      enName: itemCustomize.enName
    });
  });
  data.otherProperties
    .filter(item => item.name)
    .map(item => {
      tableData.value.set(item.key, {
        name: locale.getTByKey(`propertyConfig.${item.key}`, item.name),
        key: item.key,
        show: true,
        enName: item.enName
      });
    });
}
</script>
<style lang="scss" scoped>
.v-editor-model-tree-select {
  height: 100%;
  overflow: hidden;
  .v-property-node-label {
    overflow: hidden;
    line-height: 24px;
  }
  > .img-btn {
    display: flex;
    align-items: center;
  }
}
</style>
